<template>
    <div id="login-box">
        <div class="login-title">{{title}}</div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    const title = ref('欢迎来到note世界、这里有在项目遇到的各种奇葩的问题与分享、来一起探讨吧')
</script>

<style lang="less" scoped>
@keyframes prints {
    from {
        width: 0
    }
}

@keyframes printsInfo {
    50% {
        border-color: transparent;
    }
}

.login-box{
    .login-title{
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        border-right: 3px solid;
        font-family: monospace;
        animation: prints 2s steps(30), printsInfo .5s step-end infinite alternate;
    }
}
</style>